<template>
  <view>
    <add-order-cell label="项目" has-slot arrow>
      <picker :value="pickerValue" class="flex-item" range-key="name" :range="proudNameList" @change="changeValue($event,'productId')">
        <text class="text-30 color-t1">{{ form.internalProductTypeLabel }}</text>
      </picker>
    </add-order-cell>

    <add-order-cell v-if="form.internalProductType==3" v-model="form.pickUpNum" must label="接送趟次" type="number" :maxlength="3" placeholder="请输入接送趟次" suffix="趟" />

    <add-order-cell label="行程单" has-slot align-items="center" @click="uploadItineraryUrl">
      <view class="flex-item flex-row align-center justify-end">
        <view class="relative">
          <l-avatar :avatar="form.itineraryUrl" type="square" :default="defaultImg" />
          <view v-if="form.itineraryUrl" class="close flex-row flex-center" @click.stop="form.itineraryUrl = ''">
            <text class="tbb-guanbi1 text-24 color-white" />
          </view>
        </view>
      </view>
    </add-order-cell>

    <add-order-cell v-model="form.contact" label="联系人/导游" placeholder="请输入联系人/导游" />
    <add-order-cell v-model="form.phone" label="联系电话" placeholder="请输入联系电话" type="number" :maxlength="11" />
    <add-order-cell v-model="form.remark" :unlined="type === 'edit'" label="订单备注" maxlength="200" placeholder="请输入订单备注" />
    <add-order-cell v-if="type !== 'edit'" label="套团" unlined has-slot un-hover>
      <view class="flex-row flex-item justify-end">
        <switch style="transform: scale(.7)" :color="colors.colorPrimary" :checked="form.isTaoTuan" @change="changeValue($event,'isTaoTuan')" />
      </view>
    </add-order-cell>

    <tui-modal :show.sync="showModal" :title="errMsg.title" :content="errMsg.msg" @click="modalClick" />
  </view>
</template>

<script>
import AddOrderCell from '../add-order-cell/add-order-cell'
import colors from '@/common/colors'
import { saveImage, openSetting } from '@/common/util'
import { products } from '../../index'
import { getProductListCv } from '@/common/api/car'
export default {
  name: 'OrderOtherModule',
  components: {
    AddOrderCell
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Number,
      default: 0
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      colors,
      defaultImg: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/card_cert.png',
      showModal: false,
      errMsg: {
        title: '',
        msg: ''
      },
      pickerValue: 0,
      form: {
        internalProductType: products[0].value, // 产品
        internalProductTypeLabel: '', // 产品名称
        pickUpNum: 1, // 接送趟次
        itineraryUrl: '', // 行程单
        contact: '', // 联系人/导游
        phone: '', // 乘车联系人电话
        remark: '', // 订单备注
        isTaoTuan: false, // 套团
        roundType: 1 // 出团往返类型 1：单程，2：往返
      },
	  proudNameList:[],
      products // 产品列表
    }
  },
  watch: {
    value(e) {
      this.pickerValue = e
    },
    form: {
      handler(e) {
        this.$emit('update', e)
      },
      deep: true
    },
    data: {
      handler(e) {
        this.initData(e)
      },
      deep: true
    }
  },
  created() {
    this.initData(this.data)
	this.getProductName()
  },
  methods: {
	  async getProductName(){
		  let [err,res] = await getProductListCv()
			  this.proudNameList = res.data.data
			  this.form.internalProductTypeLabel = this.proudNameList[0].name
			  console.log(res.data.data)
	  },
    initData(e) {
      Object.keys(this.form).forEach(item => {
        this.form[item] = e[item]
      })
    },
    // 修改值
    changeValue(e, key) {
		console.log(e)
      const val = e.detail.value
      if (key === 'productId') {
        this.form.internalProductTypeLabel = this.proudNameList[val].name
        this.form[key] = this.proudNameList[val].id
      } else {
        this.form[key] = val
      }
    },
    // 选择图片
    uploadItineraryUrl() {
      saveImage('order').then(src => {
        this.form.itineraryUrl = src
      }).catch(err => {
        this.showModal = true
        this.errMsg = err
      })
    },
    // 打开设置
    modalClick(e) {
      this.showModal = false
      if (e.index && this.errMsg.code === 1025) {
        openSetting()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.close{
  width: 38rpx;
  height: 38rpx;
  background: rgba(0, 0, 0, 0.4);
  border-radius:50%;
  @include position(absolute,$top:8rpx,$right:8rpx);
}
</style>
